import { Kwidget } from "../kWidget";

class Kbutton extends Kwidget{
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.render();
        this.btn = this.shadowRoot.querySelector('.k-button');
    }

    static get observedAttributes() {
        return ['status','type'];
    }

    connectedCallback() {
        this.logInfo('k-button挂载成功');
    }


    attributeChangedCallback(name, oldVal, newVal) {
        switch (name) { 
            case "status":
                this.setStatus(newVal);
                break;
            case "type":
                this.setType(newVal);
                break;
            default:
                break;
        }
    }

    setStatus(value) {
        this.btn.classList.add(`k-button-${value}`);
    }

    setType(value) {
        this.btn.style.setProperty("border-style", value);
    }

    get status() {
        return this.getAttribute('status') || 'primary';
    }
    set status(val) {
        this.setAttribute('status', val);
    }

    get type() {
        return this.getAttribute('type') || 'solid';
    }
    set type(val) {
        this.setAttribute('type', val);
    }

    async render() {
        const template = document.createElement('template');
        template.innerHTML = `
            <button class="k-button">
                <slot></slot>
            </button>
        `;
        this.shadowRoot.appendChild(template.content.cloneNode(true));
        const cssText = await this.loadCssText("./kButton/index.css");
        this.initStyle(cssText);
    }
}

customElements.define('k-button', Kbutton);

export { Kbutton };